<template>
	<view class="projectlist">
		<view class="projectimg">
			<image class="proimg" :src="data.contentpicture" mode="widthFix"></image>
		</view>
		<view class="proj-jj">
			<view class="pjj">
				<image class="xmjj-icon" src="../../static/xmjj.png"></image>
				项目简介</view>
			<text class="todetail" @click="todetail(data.id)">了解详情></text>
		</view>
		<view :class="'sumary fontsize'+fontsizenub">{{data.summary}}</view>
		<view class="prompt" @click="toweb(data.id)">{{data.prompt}}</view>
		<view class="proj-xmdt">
			<image class="xmjj-icon" src="../../static/xmdt.png"></image>
			项目动态</view>
			<view class="dolastbox">
				<block v-for="(item,index) in xmdtlist" :key="index">
					<view class="xmdt" @click="toxmdtdetail(item.id,item.link,item.is_content)">
						<image class="xmdt-img" :src="item.picture"></image>
						<view class="xmdt-otr">
							<view :class="'xmdt-title fontsize'+fontsizenub">{{item.title}}</view>
							<view class="xmdt-sumary">
								<view :class="'xmdt-time fontsize'+fontsizenub">{{item.updateTime}}</view>
								<view :class="'xmdt-source fontsize'+fontsizenub">来源:{{item.source}}</view>
							</view>
						</view>
					</view>
				</block>
			</view>
		
		<view class="fixed">
			<view class="shenbao otrs" v-if="data.status == 3">项目申报</view>
			<view class="shenbao" @click="toshenbao" v-else>项目申报</view>
		</view>
	</view>
</template>

<script>
	import {common} from '@/common/publish.js';
	import {mapState,mapMutations} from 'vuex';
	export default {
		data() {
			return {
				data:{},
				xmdtlist:[]
			};
		},
		onLoad(event) {
			this.getlist(event.id);
		},
		methods:{
			getlist:function(id){
				var that = this;
				uni.request({
					url: common.localurl+'/api/project/project.json', 
					data:{projectId:id},
					method:'GET',
					dataType:'json',
					success: (res) => {
						this.data = res.data.data.project;
						var dian = ''
						if(this.data.summary.length>54){
							dian = '...'
						}
						this.data.summary = this.data.summary.substring(0,54)+dian;
						this.xmdtlist = res.data.data.projectDynamicList;
						for(var i=0;i<this.xmdtlist.length;i++){
							this.xmdtlist[i].updateTime = common.format(this.xmdtlist[i].updateTime)
						}
						uni.setNavigationBarTitle({
							title: that.data.title
						});
					}
				});
			},
			todetail:function(val){
				uni.navigateTo({
					url: '/pages/xq/xq?type=project&id='+val
				});
			},
			toweb:function(val){
				uni.navigateTo({
					url: '/pages/webview/webview?type=project&id='+val
				});
			},
			toxmdtdetail:function(id,link,who){
				if(who ==1){
					uni.navigateTo({
						url: '/pages/xq/xq?type=projectlist&id='+id
					});
				}else{
					uni.navigateTo({
						url: '/pages/webview/webview?type=projectlist&id='+id
					});
				}
			},
			toshenbao:function(){
				var that = this;
				uni.navigateTo({
					url: '/pages/webview/webview?type=proj&id='+that.data.id
				});
			}
		},
		computed:{
			...mapState(['fontsizenub'])
		}
	}
</script>

<style lang="scss">
	@import '@/common/publish.scss';
	@include fontsizefn(".sumary",30upx);
	
	@include fontsizefn(".xmdt-title",34upx);
	@include fontsizefn(".xmdt-time",28upx);
	@include fontsizefn(".xmdt-source",28upx);
	page{
		background:$bgcolor;
	}
	.projectimg{
		width:750upx;
	}
	.proimg{
		width:100%;
	}
	.proj-jj{
		display: flex;
		flex-direction:row;
		flex-wrap:nowrap ;
		justify-content:space-between;
		align-items:flex-start;
		padding:0 24upx;
		margin-top:14upx;
		margin-bottom:10upx;
	}
	.pjj{
		font-size:38upx;
		line-height:50upx;
	}
	.xmjj-icon{
		width:32upx;
		height:30upx;
		margin-right:10upx;
	}
	.todetail{
		font-size:30upx;
		line-height:50upx;
		color:$fontblue;
	}
	.sumary{
		line-height:48upx;
		text-indent: 2em;
		color:#333;
		margin:0 24upx;
		border-bottom:1px dashed $timecolor;
		padding-bottom:20upx;
	}
	.prompt{
		line-height:60upx;
		text-indent: 2em;
		color:$fontblue;
		text-align:center;
		text-overflow : ellipsis;
		font-size:28upx;
		padding:0 24upx;
		border-bottom:1px solid #ccc;
	}
	.proj-xmdt{
		padding:0 24upx;
		font-size:38upx;
		line-height:50upx;
		margin-top:20upx;
		margin-bottom:20upx;
	}
	.xmdt{
		display: flex;
		flex-direction:row;
		flex-wrap:nowrap ;
		justify-content:flex-start;
		align-items:flex-start;
		padding:0 24upx;
		margin-bottom:30upx;
	}
	.xmdt-img{
		width:116upx;
		height:116upx;
		border-radius:50%;
		margin-right:20upx;
	}
	.dolastbox{
		margin-bottom:90upx;
	}
	.xmdt-otr{
		flex:1;
		padding-bottom:10upx;
		border-bottom:1px solid #ccc;
	}
	.xmdt-title{
		text-overflow : ellipsis;
		color:$titlecolor;
		line-height:52upx;
		overflow:hidden;
		height:52upx;
	}
	.xmdt-sumary{
		display: flex;
		flex-direction:row;
		flex-wrap:nowrap ;
		justify-content:space-between;
		align-items:flex-start;
		margin-top:20upx;
		line-height:40upx;
		color:$timecolor;
	}
	.xmdt-time{
		color:$timecolor;
	}
	.fixed{
		position:fixed;
		left:0;
		bottom:0;
		width:750upx;
		height:80upx;
		background-color: #ccc;
		z-index:20;
	}
	.shenbao{
		position:absolute;
		top:0;
		right:0;
		text-align:center;
		height:100%;
		width:40%;
		background-color:#dd6264;
		color:#fff;
		line-height:80upx;
	}
	.otrs{
		background-color:#f3f3f3;
	}
</style>
